<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Fit Layout</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /><link href="../demo.css" rel="stylesheet" type="text/css" />


    <script src="${ctxPath}/js/boot.js" type="text/javascript"></script>
    <link href="${ctxPath}/js/miniui/themes/blue/skin.css" rel="stylesheet" type="text/css" />


</head>
<body >
<style type="text/css">
    html, body{
        margin:0;padding:0;border:0;width:100%;height:100%;overflow:hidden;
    }

</style>

<div class="mini-toolbar">
    <a class="mini-button" iconCls="icon-add" onclick="addRow()" plain="true" tooltip="增加...">增加</a>
    <a class="mini-button" iconCls="icon-remove" onclick="removeRow()" plain="true">删除</a>
    <span class="separator"></span>
    <a class="mini-button" iconCls="icon-save" onclick="saveData()" plain="true">保存</a>
    <span class="separator"></span>
</div>

<!--撑满页面-->
<div class="mini-fit" >

    <div id="datagrid1" class="mini-datagrid" style="width:100%;height:100%;"
         url="${ctxPath}/blood/bloodList"  idField="id"
         sizeList="[20,30,50]" pageSize="20"
         allowResize="true" allowCellEdit="true" allowCellSelect="true"
         editNextOnEnterKey="true"  editNextRowCell="true"
            >
        <div property="columns">
            <div field="id" width="50" headerAlign="left" allowSort="true">编号</div>
            <div name="name"  field="name" headerAlign="left"  width="200" >名称
                <input property="editor" class="mini-textbox" style="width:100%;" minWidth="200" />
            </div>

            <div field="memo" width="200" headerAlign="left">备注
                <input property="editor" class="mini-textarea" style="width:200px;" minWidth="200" minHeight="50"/>
            </div>

        </div>
    </div>

</div>

<script type="text/javascript">
    mini.parse();
    var grid = mini.get("datagrid1");
    grid.load();

    function addRow() {
        var newRow = { name: "New Row" };
        grid.addRow(newRow, 0);

        grid.beginEditCell(newRow, "LoginName");
    }
    function removeRow() {
        var rows = grid.getSelecteds();
        if (rows.length > 0) {
            grid.removeRows(rows, true);
        }
    }
    function saveData() {

        var data = grid.getChanges();
        var json = mini.encode(data);

        grid.loading("保存中，请稍后......");
        $.ajax({
            url: "${ctxPath}/blood/save",
            data: { data: json },
            type: "post",
            success: function (text) {
                grid.reload();
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert(jqXHR.responseText);
            }
        });
    }


    grid.on("celleditenter", function (e) {
        var index = grid.indexOf(e.record);
        if (index == grid.getData().length - 1) {
            var row = {};
            grid.addRow(row);
        }
    });
</script>

</body>
</html>